<template>

    <div class="home"> 
        <router-view v-if="$route.path=='/home/searchpop'"></router-view>
        <div v-else>
            <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" @click="search"/>  
            <Swiper :swiperArr="swiperArr"></Swiper>  
            <Grid :channelArr="channelArr"></Grid>  
            <BrandList :brandList="brandList"></BrandList>
            <NewProduct :newGoodsList="newGoodsList"></NewProduct>
            <HotGoodsList :hotGoodsList="hotGoodsList"></HotGoodsList>
            <TopicList :topicList="topicList"></TopicList>
            <Topic :categoryList="categoryList"></Topic>
        </div>

    </div>
</template>

<script>
//引入轮播图
import Swiper from '@/components/Swiper.vue';
//引入主页请求数
import {GetIndexData} from '@/https/http.js'
//引入grid宫格:图标导航
import Grid from '@/components/grid.vue'
//引入品牌制造商组件
import BrandList from '@/components/BrandList.vue'
//引入新品首发的组件
import NewProduct from '@/components/NewProduct.vue'
//引入人气推荐
import HotGoodsList from '@/components/HotGoodsList.vue'
//引入专题精选轮播图
import TopicList from '@/components/TopicList.vue'
//引入专题组件
import Topic from '@/components/Topic.vue'

export default {
    name: 'VueHome',
    components:{
        Grid,

        Swiper,
        BrandList,
        NewProduct,
        HotGoodsList,
        TopicList,
        Topic,


    },

    data() {
        return {
            value:'',
            swiperArr:[],  //轮播图数据
            channelArr:[],  //网格中的数据
            brandList:[],    //品牌制造商的数据
            newGoodsList:[],   //新品首发数据
            hotGoodsList:[],     //人气推荐
            topicList:[],  //专题精选轮播图数据
            categoryList:[],  //专题数据

        };
    },

    created(){
        GetIndexData().then(res=>{

            console.log(res)
            this.swiperArr=res.data.data.banner
            this.channelArr=res.data.data.channel
            this.brandList=res.data.data.brandList
            this.newGoodsList=res.data.data.newGoodsList
            this.hotGoodsList=res.data.data.hotGoodsList
            this.topicList=res.data.data.topicList
            this.categoryList=res.data.data.categoryList

        })

    },

    methods: {

        search(){
            // console.log(this.$route)
            this.$router.push('/home/searchpop')
        }

        
    },
};
</script>